<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>二维码</title>
    <link rel="stylesheet" href="../css/default.css" />
    <link rel="stylesheet" href="../css/code.css" />
  </head>
  <body>
    <div class="code" id="code">
      <!-- 头部查询 -->
      <nav class="nav ">
        <span class=" item">科室</span>
        <div class="drop-box item site">
          <input
            class="input-drop "
            type="text"
            name=""
            id=""
            :value="dropListSelectValue"
            placeholder=""
            id="input-drop"
          />
          <div class="drop posi" @click="dropClick"></div>
          <ul class="drop-list" :class="isDrop?'drop-show': null">
            <li
              class="li"
              v-for="i in dropList"
              @click="dropListSelectClick(i)"
            >
              {{ i }}
            </li>
          </ul>
        </div>

        <div class="search-box drop-box item">
          <input
            class="input-search "
            type="text"
            name=""
            id=""
            placeholder="姓名搜索"
          />
          <div class="search posi"></div>
        </div>

        <p class="item text co">二维码</p>
        <p class="item text export">全部导出</p>
      </nav>
      <!-- end -->
      <ul class="ul clearfix">
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="item">
            <div class="img-box">
              <img src="../images/code/code.png" width="100%" alt="" />
            </div>

            <div class="bottom clearfix">
              <div class="left ">
                <p class="name">吴小莉</p>
                <p class="txt-over">科室：心脑血管科</p>
                <p class="txt-over">工号：000112</p>
              </div>
              <div class="right ">
                <p class="download ">下载图片</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- js -->
    <script src="../js/lib/vue/vue.min.js"></script>
    <script>
      var vm = new Vue({
        el: "#code",
        data: {
          isDrop: false,
          dropList: ["阿松大", "带我去"],
          dropListSelectValue: ""
        },
        created: function() {
          this.dropListSelectValue = this.dropList[0];
        },
        methods: {
          dropClick: function() {
            console.log("aa");
            this.isDrop = !this.isDrop;
          },
          dropListSelectClick: function(item) {
            this.dropListSelectValue = item;
            this.isDrop = false;
          }
        }
      });
    </script>
  </body>
</html>
